<template>
	<div class="main">
        <MyHeader title="购物车案例"></MyHeader>
        <MyGoods v-for="item in list" :key="item.goods_id" :obj="item"></MyGoods>
        <MyFooter :obj="list"></MyFooter>
	</div>  
</template>

<script>
	// 获取-购物车列表接口  GET  https://applet-base-api-t.itheima.net/api/cart
    import MyHeader from './components/MyHeader.vue'
    import MyGoods from './components/MyGoods.vue'
    import MyFooter from './components/MyFooter.vue'
    import "bootstrap/dist/css/bootstrap.css";
    import axios from "axios";
	export default {
		data() {
			return {
				list: [] // 商品所有数据
			}
		},
        components:{
            MyHeader,
            MyGoods,
            MyFooter
        },
        created(){
            this.getList()
        },
    methods:{
       async getList(){
            const {data:res} = await axios.get("https://applet-base-api-t.itheima.net/api/cart")
            this.list = res.list
        }
    }
	}
</script>

<style scoped>
	.main {
		padding-top: 45px;
		padding-bottom: 50px;
	}
</style>
